<template>
  <view class="container">

    <!-- 职位基础信息卡片 -->
    <view class="info-card job-basic-info">
      <text class="job-title">{{ model.title }}</text>
      <text class="salary-range">

        <text class="salary-text" v-if="model.minSalary>0">{{ formatSalary(model.minSalary )}} - </text>
        <text class="salary-text" v-if="model.maxSalary>0">{{ formatSalary(model.maxSalary )}}</text>
        <text class="salary-text" v-else>面议</text>

      </text>
      <view class="meta-info">
        <view class="meta-item" @click="handleShowLocation">
          <u-icon name="map" color="#64748b" size="16"></u-icon>
          <text>{{ model.location }}</text>
        </view>
        <view class="meta-item">
          <u-icon name="calendar" color="#64748b" size="16"></u-icon>
          <text>经验：{{ model.experience }}</text>
        </view>
        <view class="meta-item">
          <u-icon name="level" color="#64748b" size="16"></u-icon>
          <text>学历：{{ model.education }}</text>
        </view>
      </view>
      <view class="tags-section" v-if="jobTags.length > 0">
        <u-tag v-for="tag in jobTags" :key="tag" :text="tag" plain bg-color="#e0f2fe" color="#0369a1" border-color="transparent" shape="circle"></u-tag>
      </view>
    </view>

    <!-- 公司信息卡片 -->
    <view class="info-card company-info">
      <view style="padding: 10px 0px;">公司信息:</view>
      <view class="company-header">
        <text class="company-name">{{ model.company }}</text>
      </view>
    </view>

    <!-- 职位描述卡片 -->
    <view class="info-card job-description-card">
      <view class="section-title">
        <u-icon name="file-text" color="#0ea5e9" size="18"></u-icon>
        <text class="title-text">职位描述</text>
      </view>
      <view class="content-block" v-if="model.responsibilities">
        <text class="block-title">岗位职责</text>
        <text class="block-content">{{ model.responsibilities }}</text>
      </view>
      <view class="content-block">
        <text class="block-title">任职要求</text>
        <text class="block-content">{{ model.requirements }}</text>
      </view>
    </view>

    <!-- 更多信息卡片 (可选) -->
    <view class="info-card more-info-card">
      <view class="section-title">
        <u-icon name="info-circle" color="#f59e0b" size="18"></u-icon>
        <text class="title-text">更多信息</text>
      </view>
      <view class="info-item">
        <text class="info-label">发布时间：</text>
        <text class="info-value">{{ model.createTime }}</text>
      </view>
      <template v-for="item in phoneNumbers">
        <view class="info-item" v-if="item.name">
          <text class="info-label">联系人：</text>
          <text class="info-value">{{ item.name}}</text>
        </view>
        <view class="info-item" v-if="item.phone">
          <text class="info-label">联系电话：</text>
          <text class="info-value">{{ item.phone }}</text>
        </view>
      </template>
      <view class="info-item">
        <u-button @click="makePhoneCall" type="success" shape="circle">立即拨号</u-button>
      </view>
    </view>
    <!-- 提示组件 -->
    <u-toast ref="uToast"></u-toast>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        model: {
          addressName: '', // 地址名称
          company: '', // 公司名称
          contactPerson: '', // 联系人 
          education: '', // 学历要求
          experience: '', // 经验要求
          face: '', // 公司头像 
          jobType: '', // 职位类型
          location: '', // 工作地点
          phone: '', // 联系电话
          position: '', // 空间位置
          postedDate: '', // 发布时间
          requirements: '', // 任职要求
          responsibilities: '', // 岗位职责
          salaryRange: '', // 薪资范围
          status: 0, // 招聘状态
          tagsJson: '', // 标签
          title: '', // 职位名称
        },
        phoneNumbers: []
      }
    },
    computed: {
      jobTags() {
        try {
          return this.model.tagsJson ? JSON.parse(this.model.tagsJson) : [];
        } catch (e) {
          console.error("Error parsing tagsJson:", e);
          return [];
        }
      }
    },
    onLoad(options) {
      if (options.id) {
        this.model.id = options.id;
        this.fetchData();
      }
    },
    methods: {
      fetchData() {
        uni.$u.http.get('/api/zhaopin/' + this.model.id).then(response => {
          let { code, message, result } = response.data
          if (code != 200) {
            this.$u.toast(message)
            return
          }
          this.model = result
          if (result.phoneNumbers) {
            this.phoneNumbers = JSON.parse(result.phoneNumbers)
          }

          // console.log(result)
        }).catch(err => {
          console.error('获取信息失败:', err)
        })
      },
      formatSalary(num) {
        if (typeof num !== 'number') {
          return '0'
        }
        // 处理数值为0的情况
        if (num === 0) return '0'

        // 大于等于1000时，转换为k单位
        if (num >= 1000) {
          // 除以1000，保留1位小数（如2500 → 2.5）
          const value = (num / 1000).toFixed(1)
          // 去除末尾的.0（如3000 → 3k 而非3.0k）
          return value.endsWith('.0') ? `${parseInt(value, 10)}k` : `${value}k`
        }
        // 小于1000时直接返回原数值
        return num.toString()
      },
      handleShowLocation() {
        if (!this.model.position) {
          this.$u.toast('未填写位置信息')
          return
        }
        let lnglat = JSON.parse(this.model.position)
        uni.openLocation({
          latitude: lnglat[1],
          longitude: lnglat[0],
          name: this.model.addressName,
          address: this.model.location
        })
      },
      makePhoneCall() {
        let list = this.phoneNumbers.map(t => t.phone).filter(t => t !== '')
        if (list.length == 0) {
          this.$u.toast('未填写号码信息')
          return
        }
        uni.showActionSheet({
          itemList: list,
          success: (res) => {
            uni.makePhoneCall({
              phoneNumber: list[res.tapIndex]
            })
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .container {
    min-height: 100vh;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
  }

  .custom-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: white;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

    .nav-content {
      height: 44px; // 固定导航栏高度
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 32rpx;

      .back-btn {
        padding: 16rpx;
        margin-left: -16rpx;
      }

      .nav-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #1e293b;
      }

      .action-btns {
        display: flex;
        gap: 24rpx;

        .action-item {
          padding: 16rpx;
        }
      }
    }
  }

  .main-content {
    position: absolute;
    left: 0;
    right: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .info-card {
    background: white;
    border-radius: 24rpx;
    margin: 0 32rpx 32rpx;
    padding: 32rpx;
    box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.08);
    border: 1rpx solid #f1f5f9;
  }

  .job-basic-info {
    margin-top: 24rpx; // 留出顶部导航栏的空间

    .job-title {
      font-size: 48rpx;
      font-weight: bold;
      color: #1e293b;
      line-height: 1.3;
      margin-bottom: 16rpx;
      display: block;
    }

    .salary-range {
      font-size: 36rpx;
      font-weight: 600;
      color: #ef4444;
      margin-bottom: 24rpx;
      display: block;
    }

    .meta-info {
      display: flex;
      flex-wrap: wrap;
      gap: 24rpx;
      margin-bottom: 24rpx;

      .meta-item {
        display: flex;
        align-items: center;
        gap: 8rpx;
        font-size: 26rpx;
        color: #64748b;
      }
    }

    .tags-section {
      display: flex;
      flex-wrap: wrap;
      margin-top: 16rpx;
      gap: 10upx;
    }
  }

  .company-info {
    .company-header {
      display: flex;
      align-items: center;
      gap: 24rpx;
      margin-bottom: 16rpx;

      .company-name {
        flex: 1;
        font-size: 32rpx;
        font-weight: 600;
        color: #1e293b;
      }
    }

    .company-meta {
      font-size: 26rpx;
      color: #64748b;
    }
  }

  .section-title {
    display: flex;
    align-items: center;
    gap: 12rpx;
    font-size: 32rpx;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 32rpx;
  }

  .job-description-card {
    .content-block {
      margin-bottom: 40rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .block-title {
        font-size: 28rpx;
        font-weight: 600;
        color: #334155;
        margin-bottom: 16rpx;
        display: block;
      }

      .block-content {
        font-size: 28rpx;
        color: #475569;
        line-height: 1.6;
        white-space: pre-wrap; // 保留换行符
      }
    }
  }

  .more-info-card {
    .info-item {
      display: flex;
      margin-bottom: 16rpx;

      &:last-child {
        margin-bottom: 0;
      }

      .info-label {
        font-size: 26rpx;
        color: #94a3b8;
        width: 160rpx;
        flex-shrink: 0;
      }

      .info-value {
        flex: 1;
        font-size: 26rpx;
        color: #334155;

        &[data-clickable="true"] {
          color: #0ea5e9;
          text-decoration: underline;
        }
      }
    }
  }

  .bottom-space {
    height: 40rpx; // 底部留白，防止内容被底部操作栏遮挡
  }

  .bottom-action-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: white;
    display: flex;
    align-items: center;
    padding: 24rpx 32rpx;
    border-top: 1rpx solid #f1f5f9;
    box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
    z-index: 100;

    .chat-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8rpx;
      margin-right: 32rpx;
      flex-shrink: 0;

      .btn-text {
        font-size: 22rpx;
        color: #64748b;
      }
    }
  }
</style>